<template>
  <div style="background-color: white">
    <div class="probox">
      <el-button size="mini" @click="open">创建角色</el-button>
    </div>

    <el-divider></el-divider>
    <div style="padding: 20px">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="name" label="角色名称" width="180">
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="200">
        </el-table-column>
        <el-table-column prop="time" label="授权时间" width="200">
        </el-table-column>
        <el-table-column prop="auth_name" label="授权人" width="150">
        </el-table-column>
        <el-table-column label="操作">
          <el-row slot-scope="scope">
            <el-button
              size="mini"
              round
              @click="
                getrole(scope.row);
                changeVisible = true;
              "
              >设置权限</el-button
            >
          </el-row>
        </el-table-column>
      </el-table>
    </div>
    <div style="padding: 10px; text-align: center">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :current-page="pageNum"
        @current-change="changePage"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- //权限 -->
    <div>
      <el-dialog title="设置权限" :visible.sync="changeVisible">
        <div style="text-align: center;">
         <el-tag>当前角色: {{ name }}</el-tag>
          <el-tree
            :data="treeData"
            show-checkbox
            default-expand-all
            node-key="id"
            ref="tree"
            highlight-current
            :props="defaultProps"
          >
          </el-tree>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="changeVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="
              getCheckedKeys();
              changeVisible = false;
            "
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { updatePermissions } from "../api/permission";
export default {
  methods: {
    ...mapActions(["addPermissions", "getPermissions", "updataRole"]),
    changePage(pageNum) {
      console.log(pageNum, this.pageSize);
      var pageSize = this.pageSize;
      this.getPermissions({ pageNum, pageSize });
    },
    updaterole(obj) {
      this.updataRole(obj);
    },
    open() {
      this.$prompt("请输入角色名", "添加角色", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.addPermissions(value);
          this.$message({
            type: "success",
            message: "你创建的角色是: " + value,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },

    getCheckedKeys() {
      this.MenusList.menus = this.$refs.tree.getCheckedKeys();
      console.log(this.MenusList);
      updatePermissions(this.MenusList);
    },
    getrole(row) {
      this.MenusList.menus = row.menus;
      this.MenusList._id = row._id;
      this.name = row.name;
      setTimeout(() => {
        this.$refs.tree.setCheckedKeys(this.MenusList.menus);
      }, 60);
    },
  },
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label",
      },

      treeData: [
        {
          id: "/home",
          label: "首页",
          children: [],
        },

        {
          label: "商品",
          id: "/goods",
          children: [
            {
              label: "品类管理",
              id: "/category",
            },

            {
              label: "商品管理",

              id: "/product",
            },
            {
              label: "规格属性",

              id: "/spec",
            },
          ],
        },

        {
          label: "用户",
          id: "/users",
          children: [
            {
              label: "用户管理",

              id: "/user",
            },
            {
              label: "权限管理",

              id: "/role",
            },
          ],
        },
        {
          label: "订单",
          id: "/orders",
          children: [
            {
              label: "订单管理",

              id: "/order",
            },
          ],
        },
      ],
      value: "",
      id: "",
      changeVisible: false,
      name: "",
      MenusList: {
        menus: [],
        _id: "",
        auth_time: +new Date(),
        auth_name: localStorage.username,
      },
      form: {
        username: "",
        password: "",
        phone: "",
        email: "",
        role_id: "",
      },
    };
  },
  computed: {
    tableData() {
      var Data = this.$store.state.permission.permissions.list;
      if (Data) {
        Data.forEach((item) => {
          item.create_time = this.$formatDate(item.create_time);
          console.log(item.auth_time);
          if (item.auth_time) {
            item.time = this.$formatDate(item.auth_time);
          } else {
            item.time = "";
          }
        });
      }
      return Data;
    },

    total() {
      return this.$store.state.permission.permissions.total;
    },
    pageNum() {
      return Number(this.$store.state.permission.permissions.pageNum);
    },
    pageSize() {
      return Number(this.$store.state.permission.permissions.pageSize);
    },
  },
};
</script>
